<template>
	<view class="creator">
		<u-subsection    :list="list" :bold="true" mode="button"
			bgColor="#fff" activeColor='#000' @change="sectionChange" inactiveColor="#999"
			:current="current"></u-subsection>
		<view style="display: flex;justify-content: flex-start;align-items: center;margin-top: 25rpx;">
			<u-icon name="star-fill" size="22" color="#f26d0b"></u-icon>
			<text>收藏列表</text>
		</view>
		<view class="information" v-for="(item, index) in creatorList" :key="index">
			<image :src="item.headimg" @click="goAuthor()" mode="aspectFill" class="information-img"></image>
			<view class="text-content">
				<!-- #ifdef H5 -->
				<view class="text-con" style="display: flex;">
					<text class="name">{{item.nickname}}</text>
					<u-icon class="ses-icon" color="#fff"
						:class="{'icon-man': item.sex === 'man', 'icon-woman': item.sex === 'woman'}" :name="item.sex"
						size="13"></u-icon>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view style="display: flex;align-items: center;justify-content:space-between;">
					<text class="name">{{item.nickname}}</text>
					<view style="width: 23rpx;height: 23rpx;"
						:class="{'icon-man': item.sex === 'man', 'icon-woman': item.sex === 'woman'}">
						<u-icon class="ses-icon" color="#fff" :name="item.sex" size="13"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<!-- <text class="gq">{{item.gq}}</text> -->
			</view>
			<view class="icons" @click="unfavorite(1,item.id)" v-if="current == 0">
				<text>取消收藏</text>
			</view>
			<view class="icons" @click="unfavorite(2,item.id)" v-if="current == 1">
				<text>取消拉黑</text>
			</view>
		</view>
		<view class="" style="margin-top: 200rpx;">
			<u-empty  v-if="creatorList.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		   </u-empty>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['收藏', '拉黑'],
				current: 0,
				creatorList: []
			}
		},
		onLoad() {
			this.electricity()
		},
		methods: {
			sectionChange(index) {
				this.current = index;
				this.electricity()
			},
			goAuthor() {

			},
			unfavorite(type,id) {
				this.$api.CollectionBlackout({ //关注页面
					creators_id:id,
					type: type
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.info,
							icon: "none"
						})
						this.electricity()
					}
				})
			},
			electricity() {
				this.$api.Blackout({
					type: this.current + 1
				}).then(res => {
					console.log(res, 'res')
					this.creatorList = res.data
				})
			},

		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.creator {
		width: 90%;
		margin:20rpx auto;
		 
	}

	.information {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
		padding: 38rpx;
		border-radius: 36rpx;
		margin: 20rpx auto;
		background-color: #fff;
	}

	.information-img {
		width: 125rpx;
		height: 125rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.text-content {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		align-items: start;
		margin-left: 20rpx;
	}

	/* #ifdef MP-WEIXIN */
	.icon-man .u-icon__icon::after {
		background-color: #007bff;
		border-radius: 50%;
		margin: 20rpx 0;
		/* 男性背景颜色 */
	}

	.icon-woman .u-icon__icon::after {
		background-color: #e83e8c;
		border-radius: 50%;
		margin: 20rpx 0;
		/* 女性背景颜色 */
	}

	.icon-man,
	.icon-woman {
		border-radius: 50%;
	}

	/* #endif */
	.name {
		margin-right: 10rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.ses-icon {
		background-color: #5500ff;
		border-radius: 50%;
		margin: 20rpx;
		display: inline-block;
	}

	.gq {
		font-size: 28rpx;
		color: #666;
	}


	.icons {
		width: 175rpx;
		background-color: #fff1e8;
		border-radius: 30rpx;
		text-align: center;
		font-size: 24rpx;
		height: 53rpx;
		line-height: 53rpx;
		color: #ea8a19;
		font-weight: 600;
	}

	.icon-man {
		background-color: #007bff;
		/* 男性背景颜色 */
	}

	.icon-woman {
		background-color: #e83e8c;
		/* 女性背景颜色 */
	}
</style>